<template>
	<div class="detail" @click.stop.self="handleCloseIcoClick">
		<div
			class="detail-food"
			v-for="(item,index) in newProducts"
			v-if="item.detail == true"
			:key="index"
		>
			<img
				@click.stop="handleCloseIcoClick(item.id)"
				class="detail-close"
				src="http://kxm.pub/shop/images/close-black.png"
				alt
			/>
			<img class="detail-food-img" :src="item.imgUrl" alt />
			<div class="detail-food-title">{{item.title}}</div>
			<div class="detail-food-sales">
				<!-- 好评星级 -->
				<home-rating :rating="item.rating"></home-rating>
				<span>月售{{item.sales}}份</span>
				<span>{{item.rating}}</span>
			</div>
			<div class="detail-food-priceLine">
				<span class="detail-food-price">¥{{item.price}}</span>
				<span class="detail-food-originPrice" v-if="item.rate">¥{{item.originPrice}}</span>
				<span class="detail-food-rate" v-if="item.rate">{{item.rate}}折</span>
				<span class="detail-food-tip" v-if="item.rate">每单限1份优惠</span>
				<span class="detail-food-cart">
					<rotate1-animation>
						<p class="number" v-if="item.number">{{item.number}}</p>
					</rotate1-animation>
					<rotate2-animation>
						<img
							v-if="item.number"
							class="sub"
							@click="handleSubClick"
							src="http://kxm.pub/shop/images/sub.png"
							alt
						/>
					</rotate2-animation>
					<img class="add" @click="handleAddClick" src="http://kxm.pub/shop/images/add.png" alt />
				</span>
			</div>
			<div class="detail-food-desc">{{item.desc}}</div>
			<div class="detail-food-desc">{{item.material}}</div>
		</div>
	</div>
</template>

<script>
	import HomeRating from "./Rating";
	import FadeAnimation from "../animation/Fade";
	import Rotate1Animation from "../animation/Rotate1";
	import Rotate2Animation from "../animation/Rotate2";

	export default {
		name: "HomeDetail",
		data() {
			return {
				showDetail: false
			};
		},
		computed: {
			//获取数据
			newProducts() {
				return this.$store.getters.newProducts;
			},
			ProductsId() {
				return this.$store.state.rst.currentDetailId;
			}
		},

		methods: {
			handleCloseIcoClick(id) {
				this.$store.commit("closeDetail", this.ProductsId);
				this.$emit("closelayerView", false);
				this.bus.$emit("closelayerView", false);
			},
			handleAddClick() {
				this.$store.commit("addNumber", this.ProductsId);
			},
			handleSubClick() {
				this.$store.commit("subNumber", this.ProductsId);
			}
		},
		components: {
			FadeAnimation,
			Rotate1Animation,
			Rotate2Animation,
			HomeRating
		}
	};
</script>

<style scoped>
	.detail {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}
	.detail-food {
		position: absolute;
		left: 0;
		right: 0;
		height: 90vh;
		bottom: 0;
		background: #fff;
	}
	.detail-close {
		position: absolute;
		top: 3vw;
		right: 3vw;
		width: 8vw;
		opacity: 0.23;
	}
	.detail-food-img {
		display: block;
		width: 100vw;
		margin: 0 auto 2.6vw auto;
	}
	.detail-food div {
		padding: 0.3vw 4vw;
	}
	.detail-food-title {
		font-weight: bold;
		font-size: 5vw;
		color: #131313;
	}
	.detail-food-sales {
		font-size: 3.2vw;
	}
	.detail-food-sales span {
		margin-right: 2vw;
	}
	.detail-food-priceLine {
		font-size: 3.6vw;
		width: 90vw;
		overflow: hidden;
		margin: 3vw 0;
	}
	.detail-food-priceLine span {
		margin-right: 1.6vw;
	}
	.detail-food-price {
		color: #f07373;
		font-size: 5vw;
	}
	.detail-food-originPrice {
		text-decoration: line-through;
		color: #aaa;
	}
	.detail-food-rate {
		position: relative;
		top: -1vw;
		margin: 0 2vw;
		color: #f07373;
		border: 1px solid #f07373;
		height: 1vw;
		padding: 0 1vw;
		font-size: 2.6vw;
	}
	.detail-food-tip {
		color: #f07373;
	}
	.detail-food-cart {
		position: absolute;
		width: 30vw;
		height: 6vw;
		right: 3vw;
	}
	.detail-food-cart .sub {
		position: absolute;
		right: 17vw;
		margin-right: 2vw;
	}
	.detail-food-cart .number {
		float: right;
		width: 6vw;
		padding-top: 0.5vw;
		text-align: center;
		margin-right: 9.8vw;
		font-size: 5vw;
	}
	.detail-food-cart .add {
		position: absolute;
		right: 0;
	}
	.detail-food-cart img {
		width: 6.5vw;
	}
	.detail-food-desc {
		font-size: 3.6vw;
	}
</style>